<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('场所月报表')" />
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 ">
            <form id="role-form">
                <div class="select-list">
                    <ul>
                        <li>
                            场所：<select name="deptId">
                            <option th:each="dept : ${depts}" th:text="${dept.deptName}" th:value="${dept.deptId}"></option>
                        </select>
                        </li>
                        <li class="select-time">
                            <label>月份： </label>
                            <input type="text"  id="month" placeholder="月份" name="month" readonly th:value="${month}"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="do_query()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>客流趋势 <small id="klzsTitle">该时间段总客流量已达到 0人次，其中客流高峰在0时共 0人次</small></h5>

                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-bar-chart" style="height: 420px"></div>
                </div>
            </div>
        </div>

        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>客群画像 <small>可根据客群数据调整经营策略</small></h5>

                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="echarts " id="echarts-hx1-chart"   style="height: 320px"></div>
                        </div>
                        <div class="col-sm-4">
                            <div class="echarts" id="echarts-hx2-chart"   style="height: 320px"></div>
                        </div>
                        <div class="col-sm-4">
                            <div class="echarts" id="echarts-hx3-chart"   style="height: 320px"></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>


        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>数据详情</h5>

                </div>
                <div class="ibox-content">
                    <table
                            id="table"
                            data-toolbar="#toolbar"
                            data-search="true"
                            data-show-refresh="true"
                            data-show-toggle="true"
                            data-show-columns="true"
                            data-show-export="true"
                            data-show-print="true"
                            data-minimum-count-columns="2"
                            data-show-pagination-switch="true"
                            data-pagination="true"
                            data-id-field="id"
                            data-page-list="[10, 25, 50, 100, ALL]"
                            data-show-footer="false"
                            data-side-pagination="client">
                    </table>
                </div>
            </div>
        </div>


    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<th:block th:include="include :: bootstrap-table-export-js" />
<th:block th:include="include :: bootstrap-table-print-js" />
<script th:inline="javascript">

    var barChart = echarts.init(document.getElementById("echarts-bar-chart"), 'light');
    var hx1Chart = echarts.init(document.getElementById("echarts-hx1-chart"), 'light');
    var hx2Chart = echarts.init(document.getElementById("echarts-hx2-chart"), 'light');
    var hx3Chart = echarts.init(document.getElementById("echarts-hx3-chart"), 'light');

    $(function() {

        layui.use('laydate', function() {
            var laydate = layui.laydate;
            startLayDate = laydate.render({
                elem: '#month',
                theme: 'molv',
                type: 'month',
                trigger: 'click'
            });
        });

        var options = {
            sortName: "startTime",
            modalName: "数据详情",
            columns: [{
                    field: 'startTime',
                sortable: true,
                    title: '时间'
                },{
                field: 'passNum',
                title: '经过',
                sortable: true
            },
                {
                    field: 'inNum',
                    title: '进入',
                    sortable: true
                },
                {
                    field: 'outNum',
                    title: '离开',
                    sortable: true
                },
                {
                    field: 'repNum',
                    title: '重复',
                    sortable: true
                },
                {
                    field: 'manNum',
                    title: '男性',
                    sortable: true
                },
                {
                    field: 'womanNum',
                    title: '女性',
                    sortable: true
                },
                {
                    field: 'unknownSexNum',
                    title: '未知性别',
                    sortable: true
                },
                {
                    field: 'childNum',
                    title: '儿童',
                    sortable: true
                },
                {
                    field: 'juvenileNum',
                    title: '少年',
                    sortable: true
                },
                {
                    field: 'teenagerNum',
                    title: '青少年',
                    sortable: true
                },
                {
                    field: 'youthNum',
                    title: '青年',
                    sortable: true
                },
                {
                    field: 'adultNum',
                    title: '壮年',
                    sortable: true
                },
                {
                    field: 'middleNum',
                    title: '中年',
                    sortable: true
                },
                {
                    field: 'elderlyNum',
                    title: '中老年',
                    sortable: true
                },
                {
                    field: 'seniorNum',
                    title: '老年',
                    sortable: true
                },
                {
                    field: 'unknownAgeNum',
                    title: '未知年龄',
                    sortable: true
                }]
        };
        $('#table').bootstrapTable(options);

        do_query();
    });

    function do_query() {
        var deptId = $("select[name='deptId']").val();
        var month = $("input[name='month']").val();
        $.ajax({
            cache : true,
            type : "POST",
            url : ctx + "sts/data/detail/statistic",
            data : {
                "deptId2": deptId,
                "month": month,
                "dateFormat": "%Y-%m-%d"
            },
            async : false,
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {
                for (var i = 0; i < data.length; i++) {
                    var it = data[i];
                    it.startTime = it.startTime.substring(0, 10);
                }
                $('#table').bootstrapTable('load',data);
                setBarChart(data);
                setHx1Chart(data);
                setHx2Chart(data);
                setHx3Chart(data);
            }
        });
    }

    function setBarChart(data) {
        var month = $("#month").val();
        var months = month.split("-");
        var dateRange = getMonthDatesOptimized(months[0], months[1]);
        var inData = Array(dateRange.length).fill(0);
        var outData = Array(dateRange.length).fill(0);
        var passData = Array(dateRange.length).fill(0);
        var inNumTotal = 0;
        for (var i = 0; i < data.length; i++) {
            var it = data[i];
            inNumTotal = inNumTotal + it.inNum;
            var index = dateRange.indexOf(it.startTime);
            inData[index] = it.inNum;
            outData[index] = it.outNum;
            passData[index] = it.passNum;
        }
        var maxInData = Math.max(...inData);
        var maxInIndex = inData.indexOf(maxInData);
        var klzsTitle = "该时间段总客流量已达到 "+inNumTotal+"人次，其中客流高峰在"+dateRange[maxInIndex]+"时共 "+maxInData+"人次";
        $("#klzsTitle").text(klzsTitle);
        var option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['经过客流', '进入客流', '离开客流']
            },
            grid: {
                left: 50,
                right: 10,
                bottom: 60
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: dateRange,
                    axisLabel: {
                        rotate: 45, // 标签旋转 45 度
                        margin: 20, // 标签与轴线的间距
                        align: 'right', // 文字对齐方式（旋转后对齐调整）
                        verticalAlign: 'middle', // 垂直对齐方式
                        // 可添加样式（如字体大小、颜色）
                        textStyle: {
                            fontSize: 10
                        }
                    },
                    nameLocation: 'center',
                    nameGap: 40 // 标题与轴的距离
                }
            ],
            yAxis: [
                {
                    name: '人次',
                    nameLocation: 'center',
                    nameRotate: 90,
                    nameTextStyle: {
                        color: '#666',
                        verticalAlign: 'middle',
                        align: 'right'
                    },
                    nameGap: 30
                }
            ],
            series: [
                {
                    name: '经过客流',
                    type: 'bar',
                    stack: 'total',
                    data: passData
                },
                {
                    name: '进入客流',
                    type: 'bar',
                    stack: 'total',
                    data: inData
                },
                {
                    name: '离开客流',
                    type: 'bar',
                    stack: 'total',
                    data: outData
                }
            ]
        };
        barChart.clear();
        barChart.setOption(option);

        window.onresize = barChart.resize;
    }

    function setHx1Chart(data) {

        var passNumTotal = 0;
        var inNumTotal = 0;
        var inNumRate = 0;
        for(var i=0;i<data.length;i++){
            var it = data[i];
            passNumTotal = passNumTotal + it.passNum;
            inNumTotal = inNumTotal + it.inNum;
            if(passNumTotal > 0){
                inNumRate = (Number((inNumTotal/passNumTotal))*100).toFixed(0);
            }
        }
        var option = {
            title: {
                text: '进店率' + inNumRate + '%',
                left: 'center',    // 水平居中
                bottom: 0,
                textStyle: {
                    fontSize: 12,
                },
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '总人次',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: passNumTotal, name: '经过' },
                        { value: inNumTotal, name: '进入' },
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        hx1Chart.clear();
        hx1Chart.setOption(option);
        $(window).resize(hx1Chart.resize);
    }

    function setHx2Chart(data){

        var manNumTotal = 0;
        var womanNumTotal = 0;
        var unknownSexNumTotal = 0;
        for(var i=0;i<data.length;i++){
            var it = data[i];
            manNumTotal = manNumTotal + it.manNum;
            womanNumTotal = womanNumTotal + it.womanNum;
            unknownSexNumTotal = unknownSexNumTotal + it.unknownSexNum;
        }

        var option = {
            title: {
                text: '男女分布',
                left: 'center',    // 水平居中
                bottom: 0,
                textStyle: {
                    fontSize: 12,
                },
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '总人次',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: manNumTotal, name: '男性' },
                        { value: womanNumTotal, name: '女性' },
                        { value: unknownSexNumTotal, name: '未知' }
                    ]
                }
            ]
        };
        hx2Chart.clear();
        hx2Chart.setOption(option);
        $(window).resize(hx2Chart.resize);
    }

    function setHx3Chart(data){
        var childNumTotal = 0;
        var juvenileNumTotal = 0;
        var teenagerTotal = 0;
        var youthNumTotal = 0;
        var adultNumTotal = 0;
        var middleNumTotal = 0;
        var elderlyNumTotal = 0;
        var seniorNumTotal = 0;
        var unknownAgeNumTotal = 0;
        var maxNum = 1;
        for(var i=0;i<data.length;i++){
            var it = data[i];
            childNumTotal = childNumTotal + it.childNum;
            juvenileNumTotal = juvenileNumTotal + it.juvenileNum;
            teenagerTotal = teenagerTotal + it.teenagerNum;
            youthNumTotal = youthNumTotal + it.youthNum;
            adultNumTotal = adultNumTotal + it.adultNum;
            middleNumTotal = middleNumTotal + it.middleNum;
            elderlyNumTotal = elderlyNumTotal + it.elderlyNum;
            seniorNumTotal = seniorNumTotal + it.seniorNum;
            unknownAgeNumTotal = unknownAgeNumTotal + it.unknownAgeNum;

        }
        maxNum = Math.max(childNumTotal, juvenileNumTotal, teenagerTotal, youthNumTotal, adultNumTotal, middleNumTotal, elderlyNumTotal, seniorNumTotal, unknownAgeNumTotal) +1;

        var option = {
            title: {
                text: '年龄分布',
                left: 'center',    // 水平居中
                bottom: 0,
                textStyle: {
                    fontSize: 12,
                },
            },
            tooltip: {
                trigger: 'item' // 或 'item'
            },
            legend: {
                top: '5%',
                left: 'right'
            },
            polar : [
                {
                    indicator : [
                        { text: '儿童', max: maxNum},
                        { text: '少年', max: maxNum},
                        { text: '青少年', max: maxNum},
                        { text: '青年', max: maxNum},
                        { text: '壮年', max: maxNum},
                        { text: '中年', max: maxNum},
                        { text: '中老年', max: maxNum},
                        { text: '老年', max: maxNum},
                        { text: '未知年龄', max: maxNum}
                    ]
                }
            ],
            calculable : true,
            series : [
                {
                    name: '总人次',
                    type: 'radar',
                    data : [
                        {
                            value : [
                                childNumTotal,
                                juvenileNumTotal,
                                teenagerTotal,
                                youthNumTotal,
                                adultNumTotal,
                                middleNumTotal,
                                elderlyNumTotal,
                                seniorNumTotal,
                                unknownAgeNumTotal],
                            name : '年龄分布',
                            // 实心区域配置
                            areaStyle: {
                                color: '#20c997', // 纯红色填充（透明度1为不透明）
                                opacity: 1                  // 完全显示填充色
                            }
                        }
                    ]
                }
            ]
        };
        hx3Chart.clear();
        hx3Chart.setOption(option);
        $(window).resize(hx3Chart.resize);
    }
</script>
</body>
</html>